<script setup lang="ts">

import SvgIcon from "@/components/lib/SvgIcon.vue";

withDefaults(defineProps<{
   modelValue?: number
}>(), {
   modelValue: 0,
});

const emits = defineEmits<{
   (eventName: "update:modelValue", active: number): void
}>();

const change = (active:any) => {
   emits("update:modelValue", active);
};

</script>

<template>
   <van-tabbar :model-value="modelValue" active-color="#07c160" inactive-color="#646566" @change="change">
      <van-tabbar-item to="/">
         <span>首页</span>
         <template #icon="props">
            <svg-icon :svg-name="`home-${props.active?`active`:`default`}`" width="24px" height="24px"></svg-icon>
         </template>
      </van-tabbar-item>
      <van-tabbar-item to="/article">
         <span>健康百科</span>
         <template #icon="props">
            <svg-icon :svg-name="`article-${props.active?`active`:`default`}`" width="24px" height="24px"></svg-icon>
         </template>
      </van-tabbar-item>
      <van-tabbar-item to="/notify">
         <span>消息中心</span>
         <template #icon="props">
            <svg-icon :svg-name="`notice-${props.active?`active`:`default`}`" width="24px" height="24px"></svg-icon>
         </template>
      </van-tabbar-item>
      <van-tabbar-item to="user">
         <span>我的</span>
         <template #icon="props">
            <svg-icon :svg-name="`user-${props.active?`active`:`default`}`" width="24px" height="24px"></svg-icon>
         </template>
      </van-tabbar-item>
   </van-tabbar>
</template>

<style scoped lang="scss">

</style>
